<template>
    <el-dialog title="1上传文件" :close-on-click-modal="false" destroy-on-close :visible.sync="visible" width="35%">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
            label-width="120px">
            <el-form-item label="文件空间" prop="fileSpace">
                <ec-select source="fileSpace" v-model="dataForm.fileSpace" placeholder="文件空间主键"></ec-select>
            </el-form-item>
            <el-form-item label="存储类型" prop="storeType">
                <ec-dict-select v-model="dataForm.storeType" placeholder="存储类型" dictType="store_type"></ec-dict-select>
            </el-form-item>
            <el-form-item label="指定上传路径" prop="filePath">
                <el-input v-model="dataForm.filePath" placeholder="文件路径"></el-input>
            </el-form-item>
            <el-upload drag :action="uploadUrl" :headers="headers" multiple :data="dataForm" ref="upload"
                :auto-upload="false" name="files" :on-error="uploadOnError" :on-progress="uploadOnProgress"
                :on-change="uploadOnChange" :on-success="uploadOnSuccess" :file-list="fileList" class="uploadbox">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">提示：只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="uploadHandler()">确定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import * as filemanagerService from '@/api/file/filemanager'
    import util from '@/libs/util'

    export default {
        data() {
            return {
                visible: false,
                fileList: [],
                dataForm: {
                    fileSpace: '',
                    storeType: '',
                    filePath: ''
                },
                dataRule: {
                    fileSpace: [{
                        required: true,
                        message: '文件空间主键不能为空',
                        trigger: 'blur'
                    }],
                    storeType: [{
                        required: true,
                        message: '存储类型不能为空',
                        trigger: 'blur'
                    }],
                    filePath: [{
                        required: false,
                        message: '文件路径不能为空',
                        trigger: 'blur'
                    }],
                }
            }
        },
        computed: {
            // 设置请求头
            headers() {
                return {
                    // 设置Content-Type类型为multipart/form-data
                    'ContentType': 'multipart/form-data',
                    // 设置token
                    'Authorization': util.cookies.get('token_type') + " " + util.cookies.get('token')
                }
            },
            // 设置上传地址
            uploadUrl() {
                // baseURL是服务器的路径，也是axios的基本路径
                return process.env.VUE_APP_API + '/fs/local/saveFiles'
            }
        },
        methods: {
            init() {
                this.visible = true
            },
            uploadHandler() {
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        this.$refs.upload.submit();

                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.$refs.upload.clearFiles();
                                this.visible = false
                                this.$emit('refreshDataList')
                            }
                        })
                    }
                })
            },
            uploadOnProgress(e, file) { //开始上传
                // console.log(e.percent, file)
            },
            uploadOnChange(file) {
                // console.log("——————————change——————————")
                // console.log(file)
                if (file.status == 'ready') {
                    // console.log("ready")
                } else if (file.status == 'fail') {
                    this.$message.error("图片上传出错，请刷新重试！")
                }
            },
            uploadOnSuccess(e, file) { //上传附件
                // console.log("——————————success——————————")
                this.$message.success("上传成功")
            },
            uploadOnError(e, file) {
                // console.log("——————————error——————————")
                // console.log(e)
                this.$message.error("图片上传出错，请刷新重试！")
            },
        }
    }
</script>
<style scoped>
    .upload .el-upload__tip {
        font-size: 12px;
    }

    .uploadbox /deep/ .el-upload {
        width: 100% !important;
    }
    .uploadbox /deep/ .el-upload-dragger {
        width: 100% !important;
    }
</style>